<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5语义化标签示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px;
        }
        header, nav, main, article, section, aside, footer {
            margin: 10px;
            padding: 15px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        header {
            background-color: #f0f7ff;
            border-color: #4285f4;
        }
        nav {
            background-color: #fff0f0;
            border-color: #ea4335;
        }
        main {
            background-color: #f0fff4;
            border-color: #34a853;
        }
        article {
            background-color: #fffbf0;
            border-color: #fbbc05;
        }
        section {
            border: 1px dashed #fbbc05;
            margin: 15px 0;
        }
        aside {
            background-color: #fcf0ff;
            border-color: #9c27b0;
        }
        footer {
            background-color: #f5f5f5;
            border-color: #666;
        }
        nav ul {
            list-style: none;
            padding: 0;
        }
        nav li {
            display: inline;
            margin-right: 20px;
        }
        nav a {
            text-decoration: none;
            color: #ea4335;
            font-weight: 500;
        }
        figure {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 20px auto;
            max-width: 80%;
            text-align: center;
        }
        figure img {
            max-width: 100%;
            height: auto;
            border-radius: 3px;
        }
        figcaption {
            color: #666;
            font-size: 0.9em;
            margin-top: 8px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 15px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f8f8f8;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div id="top"></div>

    <header>
        <h1>HTML5学习平台</h1>
        <p>专注HTML5语义化标签学习</p>
        <p>更新时间：<time datetime="2025-09-17">2025年9月17日</time></p>
    </header>

    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#semantic">语义化</a></li>
            <li><a href="#example">实例</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </nav>

    <main>
        <article>
            <header>
                <h2>HTML5语义化标签核心作用</h2>
                <p>作者：学习委员 | 分类：HTML5基础</p>
            </header>

            <section>
                <h3>一、语义化的意义</h3>
                <p>HTML5前用<code>&lt;div&gt;</code>等无语义标签，HTML5语义标签通过名称直接定义内容意义，如：</p>
                <ul>
                    <li><code>&lt;nav&gt;</code> 表示导航区域</li>
                    <li><code>&lt;article&gt;</code> 表示独立文章</li>
                </ul>
            </section>

            <section>
                <h3>二、常用标签场景</h3>
                <figure>
                    <img src="semantic-tags.png" alt="语义化标签结构示意图">
                    <figcaption>图1：语义化标签页面结构</figcaption>
                </figure>
                <table>
                    <thead>
                        <tr>
                            <th>标签</th>
                            <th>语义含义</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>&lt;header&gt;</td>
                            <td>页面/区块顶部</td>
                        </tr>
                        <tr>
                            <td>&lt;nav&gt;</td>
                            <td>导航链接</td>
                        </tr>
                        <tr>
                            <td>&lt;main&gt;</td>
                            <td>页面核心内容</td>
                        </tr>
                        <tr>
                            <td>&lt;article&gt;</td>
                            <td>独立内容块</td>
                        </tr>
                        <tr>
                            <td>&lt;aside&gt;</td>
                            <td>辅助内容</td>
                        </tr>
                        <tr>
                            <td>&lt;footer&gt;</td>
                            <td>页面/区块底部</td>
                        </tr>
                    </tbody>
                </table>
            </section>

            <footer>
                <p>标签：HTML5, 语义化, 前端规范</p>
                <p><a href="#top">返回顶部</a></p>
            </footer>
        </article>
    </main>

    <aside>
        <h3>相关推荐</h3>
        <ul>
            <li><a href="#">HTML5视频标签</a></li>
            <li><a href="#">CSS3美化标签</a></li>
        </ul>
        <h3>学习提示</h3>
        <p>先理解语义，再学样式美化。</p>
    </aside>

    <footer>
        <p>&copy; 2025 HTML5学习平台</p>
        <address>联系：<a href="mailto:contact@html5lab.com">contact@html5lab.com</a></address>
    </footer>

    <hr>
    <h3>实验小结：HTML5语义化标签价值</h3>
    <p><strong>1. 核心实现</strong></p>
    <p>用语义标签构建网页：<code>&lt;header&gt;</code>（顶部）、<code>&lt;nav&gt;</code>（导航）、<code>&lt;main&gt;</code>（核心）、<code>&lt;article&gt;</code>（文章）、<code>&lt;aside&gt;</code>（辅助）、<code>&lt;footer&gt;</code>（底部），内部用<code>&lt;section&gt;</code>拆分文章小节，<code>&lt;figure&gt;</code>+<code>&lt;figcaption&gt;</code>组合图片说明。</p>
    <p><strong>2. 关键认知</strong></p>
    <p>语义化核心是“标签表内容含义”，带来可访问性（帮助视障用户）、SEO友好（提升搜索排名）、代码易维护（开发者易识别）三大价值，使用原则“语义优先，样式其次”。</p>
</body>
</html>